Visualizing Water: Interactive Timelapse Map of River Basins (draft)

draft imwi hydrology

Part 3: how to represent water flux over 3D maps of river basins.

BACOU, Melanie https://linkedin/in/mbacou
2021-10-28

This notebook is Part 3 of an exploration to visualize results of hydrologic models. In Part 1 we built custom HTML widgets using D3.js, and in Part 2 we looked at rendering water fluxes using Sankey diagrams. Here we test multiple libraries to generate hillshade (3D) views of river basins and water infrastructure, in particular we want to compare leaflet, Three.js and MapboxGL implementations.

Aside from rendering spatial terrain and water streams in 3D (and potentially other covariate layers), our objective is to overlay custom labels to illustrate and quantify the hydrological cycle.

Some inspiration below:

Data Acquisition

We’ll start with a sample scene of the Selingue Dam in the Niger River basin.

basin <- shapefile("~/Projects/2021-iwmi/data/mli/srtm/mli_basin.shp")
zoi <- shapefile("~/Projects/2021-iwmi/data/mli/srtm/zoi.shp")
ext <- extent(zoi)
center <- coordinates(zoi)

# Get CGIAR SRTM DEM at 90m
getData("SRTM", lon=center[,1], lat=center[,2], path="_data") %>%
  crop(zoi) %>%
  mask(zoi) -> srtm
srtm
class      : RasterLayer 
dimensions : 838, 973, 815374  (nrow, ncol, ncell)
resolution : 0.0008333333, 0.0008333333  (x, y)
extent     : -8.6725, -7.861667, 11.06917, 11.7675  (xmin, xmax, ymin, ymax)
crs        : +proj=longlat +datum=WGS84 +no_defs 
source     : memory
names      : srtm_35_10 
values     : 326, 476  (min, max)
# Get LUC
#luc <- raster("~/Projects/2021-iwmi/data/mli/stat/")

# Admin boundaries

The basin covers a large area, so we need 8 SRTM tiles, but 1 is enough for a proof of concept. Next we’ll get a satellite basemap.

# Satellite basemaps
maptiles::get_tiles(terra::ext(zoi), "Esri.WorldImagery", zoom=10) %>%
  stack() %>%
  crop(zoi) %>%
  mask(zoi) -> bmap

plot(terra::vect(basin), axes=T, asp=1, col=pal[2], border=pal[1], lwd=2,
  main="Niger River Basin (Mali)")
plot(zoi, add=T, lty=3, col=alpha(pal["red"], .6), border=pal["red"], lwd=2)
text(-8, 10.5, "Selingue Dam\n(Mali)", col=pal["red"], cex=.7, font=2)
grid()

plot(terra::ext(zoi), axes=T, asp=1, border=NA, 
  main="Selingue Dam (Mali) - ESRI World Imagery")
plotRGB(bmap, add=T)
grid(col="white")

plot(srtm, axes=T, asp=1, border=NA, 
  main="Selingue Dam (Mali) - SRTM 90m")
grid(col="white")

Next we convert the 2 rasters to a matrix format that’s compatible with Rayshader methods.

Show code
# Convert rasters to rayshader matrix format
srtm_array <- raster_to_matrix(srtm)
r <- raster_to_matrix(bmap$red)
g <- raster_to_matrix(bmap$green)
b <- raster_to_matrix(bmap$blue)

bmap_array <- array(0, dim=c(nrow(r), ncol(r), 3))
bmap_array[,,1] <- r/255
bmap_array[,,2] <- g/255
bmap_array[,,3] <- b/255

bmap_array %>%
  aperm(c(2,1,3)) %>%
  # Stretch contrast
  rescale(to=c(0,1)) -> bmap_array

Rendering the (downsampled) 90m SRTM elevation map with WebGL and a satellite texture.

getData("alt", country="MLI", path="_data") %>%
  crop(zoi) %>%
  raster_to_matrix() -> alt

srtm_array %>%
  sphere_shade() %>%
  add_overlay(bmap_array) %>%
  #add_overlay(height_shade(srtm_array), alphalayer=0.6)  %>%
  #add_shadow(ray_shade(srtm_array, zscale=90)) %>%
  plot_3d(alt,
    zscale=20, zoom=0.5,
    phi=30, theta=20, fov=70,
    shadow=TRUE, shadowcolor=pal["black"]) 

rglwidget()

Figure 1: Interactive 3D Scene of Selingue Dam (Niger River basin)

Using the same steps as above we could test with multiple basemaps, e.g. OpenTopoMap and ThunderForest, that might help reveal more of the topological features.

Show code
# Satellite basemaps
maptiles::get_tiles(terra::ext(zoi), "Thunderforest.Outdoors", zoom=10,
  apikey="0d9308069306459f86443180dadc39ac") %>%
  stack() %>%
  crop(zoi) %>%
  mask(zoi) -> bmap

# Convert rasters to rayshader matrix format
r <- raster_to_matrix(bmap$red)
g <- raster_to_matrix(bmap$green)
b <- raster_to_matrix(bmap$blue)

bmap_array <- array(0, dim=c(nrow(r), ncol(r), 3))
bmap_array[,,1] <- r/255
bmap_array[,,2] <- g/255
bmap_array[,,3] <- b/255

bmap_array %>%
  aperm(c(2,1,3)) -> bmap_array
srtm_array %>%
  height_shade() %>%
  add_overlay(bmap_array) %>%
  #add_overlay(height_shade(srtm_array), alphalayer=0.6)  %>%
  #add_shadow(ray_shade(srtm_array, zscale=90)) %>%
  plot_3d(alt,
    zscale=20, zoom=0.5,
    phi=30, theta=20, fov=70,
    shadow=TRUE, shadowcolor=pal["black"],
    water=TRUE, waterdepth=336, wateralpha=.9, watercolor=pal["blue"]) 

rglwidget()

Figure 2: Interactive 3D Scene of Selingue Dam (Niger River basin)

Corrections

If you see mistakes or want to suggest changes, please create an issue on the source repository.

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. Source code is available at https://github.com/mbacou/mb-labs, unless otherwise noted. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Melanie (2021, Oct. 28). Mel's Labs: Visualizing Water: Interactive Timelapse Map of River Basins (draft). Retrieved from https://mbacou.github.io/mb-labs/posts/2021-10-24-3dmap/

BibTeX citation

@misc{melanie2021visualizing,
  author = {Melanie, BACOU,},
  title = {Mel's Labs: Visualizing Water: Interactive Timelapse Map of River Basins (draft)},
  url = {https://mbacou.github.io/mb-labs/posts/2021-10-24-3dmap/},
  year = {2021}
}